<template>
	<view class="gift">
		<view class="load" v-if="!load">
			<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
		</view>
		<block v-else>
			<block v-if="giftList.length > 0">
				<view class="item" v-for="(item, index) in giftList" :key="index">
					<view class="single">
						<view class="border" @click="nav_to(`/pages/shop/detail?id=${item.ProductID}`)">
							<view class="single_img">
								<image :src="item.img"
									mode="aspectFill"></image>
							</view>
							<view class="single_right">
								<view class="single_title">
									{{ item.ProductName }}
								</view>
								<view class="single_tabs" style="display: none;">
									<view class="single_tab" v-for="(tag, index) in tagsArray" :key="index">{{ tag }}
									</view>
								</view>
								<view class="single_spec">
									<view class="single_style">
										{{ item.ProductStyle }}
									</view>

								</view>
								<view class="single_bottom">
									<view class="single_price">
										<view class="dollor">￥</view>{{ item.Price || '免费' }}
									</view>
									<!-- <view class="single_btn" @click="changeNember()">
										去赠送
									</view> -->
									<view class="single_stock">
										库存：{{ item.StockNum || '0' }}

										<view class="restock" v-if="item.StockNum < 1">
											补充库存
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="present" v-if="item.StockNum > 0">
							<text @click="nav_to(`/pages/gift/giveRecord?productID=${item.ProductID}`)">赠送记录</text>
							<view class="present_weixin" style="margin-left: 40rpx;" @click.stop="changeNember(item,0)">
								赠送微信好友
							</view>
							<view class="present_weixin present_custom" @click="sendMyCustom(item)"><!-- @click.stop="changeNember(item,1)" -->
								赠送我的客户
							</view>
						</view>
						
						<view class="present" v-else>
							<text @click="nav_to(`/pages/gift/giveRecord?productID=${item.ProductID}`)">赠送记录</text>
							<view class="present1_weixin" style="margin-left: 40rpx;" @click="showTips()">
								赠送微信好友
							</view>
							<view class="present1_weixin present1_custom" @click="showTips()">
								赠送我的客户
							</view>
						</view>
					</view>
				</view>
			</block>
			
			<block v-else>
				<EmptyBox text="还没礼品哦~">
					<view class="orderNow" @click="nav_to('/pages/tab/home')">
						立即订购
					</view>
				</EmptyBox>
			</block>
			
			<uni-popup ref="giveGift" type="bottom" border-radius="24">
				<view class="gifts">
					<view class="gifts_preview">
						<view class="gifts_img">
							<image :src="selectedStyle.img" mode="aspectFill"></image>
						</view>

						<view class="gifts_right">
							<view class="gifts_head">
								<view class="gifts_name">
									{{ selectedStyle.ProductName }}
								</view>
								<view class="gifts_close" @tap="closePopup">
									<image
										src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721635178667747.png">
									</image>
								</view>
							</view>

							<view class="gifts_spec">
								{{ selectedStyle.ProductStyle }}
							</view>

							<view class="gifts_info">
								<view class="gifts_price">
									<view class="dollor">￥</view>{{ selectedStyle.Price }}
								</view>
								<view class="gifts_stock">
									库存：{{ selectedStyle.StockNum }}
								</view>
							</view>
						</view>
					</view>

					<view class="gifts_choice">
						<view class="gifts_count">
							<view class="gifts_title">
								赠送主题（备注）
							</view>
							<view class="senderName">
								<input type="text"  v-model="giverTitle" placeholder="请填写赠送主题" />
							</view>
						</view>
						<view class="gifts_count">
							<view class="gifts_title">
								每人数量
							</view>
							<view class="gifts_number">
								<view class="gifts_compute minus">
									<image :src="minusImage" mode="" @tap="countDecrease"></image>
								</view>
								<input type="number" :value="countQty" min="1" max="selectedStyle.StockNum" @change="handleQuantityChange" />
								<view class="gifts_compute plus">
									<image :src="plusImage" mode="" @click="countIncrease(selectedStyle.StockNum)"></image>
								</view>
							</view>
						</view>
						<view class="gifts_count" style="display: none;">
							<view class="gifts_title">
								选择赠送数量
							</view>
							<view class="gifts_number">
								<view class="gifts_compute minus">
									<image :src="minusImage" mode="" @tap="numberDecrease"></image>
								</view>
								<input type="number" :value="numberQty" />
								<view class="gifts_compute plus">
									<image :src="plusImage" mode="" @tap="numberIncrease"></image>
								</view>
							</view>
						</view>
						<view class="gifts_tips">
							请填写快递发件人姓名和发件人电话
						</view>
						<view class="gifts_count">
							<view class="gifts_title">
								快递发件人
							</view>
							<view class="senderName">
								<input type="text"  v-model="giverName" placeholder="请填写快递发件人名称" />
							</view>
						</view>
						<view class="gifts_count">
							<view class="gifts_title">
								快递发件人电话
							</view>
							<view class="senderName">
								<input type="number"  v-model="giverMobile" placeholder="请填写快递发件人电话" />
							</view>
						</view>
					</view>
					<view class="gifts_btns">
						<button class="toWXfriends" open-type="share" v-if="showIndex == 0 && isComplete">
							选择微信好友
						</button>
						<button class="toWXfriends" style="background: #999;" v-if="showIndex == 0 && !isComplete" @click="$pv.msg('请填写完整的发件信息')">
							选择微信好友
						</button>
						
						<view class="toWXfriends" @click="sendMyCustom(selectedStyle)" v-if="showIndex == 1">
							选择客户赠送
						</view>
					</view>
				</view>
			</uni-popup>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				load: false, //是否加载
				countQty: 1, // 赠送份数数量
				// numberQty: 1, // 赠送初始数量
				stock: 0,	 // 库存（对比可购买量）
				PageIndex: 1, //页码
				giftList: [], //商品列表
				isMore: true, //是否还有更多
				tagsArray: [], // tags标签
				selectedStyle: {},
				giverTitle: '', // 主题
				giverName: '', // 寄件人
				giverMobile: '', // 寄件人电话
				onlyKey: '',
				showIndex: 0, // 区别弹窗类型
			};
		},

		computed: {
			minusImage() {
				return this.countQty > 1 ?
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162992121443.png' :
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172162990142299.png';
			},
			plusImage() {
				return this.countQty < this.stock ?
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629860962316.png' :
					'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1721629877490898.png';
			},
			isComplete(){
				return !this.giverName ? false : true
			}
		},
		watch: {

		},

		onReady() {

		},
		
		async onLoad(e) {
		},
		
		async onShow() {
			this.getList()
		},
		
		onUnload() {

		},
		
		// 上拉刷新
		onPullDownRefresh() {
			this.getList()
			uni.stopPullDownRefresh()
		},
		
		onShareTimeline() {},
		
		methods: {

			// 获取商品列表
			async getList() {
				const res = await this.$api.post('/ProductStock/MyProductStock', {
					PageIndex: this.PageIndex, // 页码
					PageSize: 10, // 一页数量
					ProductName: '' // 产品名称
				});
				if (res.code == 0) {
					this.giftList = this.PageIndex == 1 ? this.giftList = res.data : this.giftList.concat(res.data)
					let arr = res.data;
					arr.forEach(item => {
					    item.img = item.Images.split(',')[0]; // 获取第一个图片 URL
					});
					// this.giftList.img = this.giftList.Images.split(',')[0];
					
					if (this.giftList[0].Tag) {
						this.tagsArray = this.giftList[0].Tag.split(',').map(tag => tag.trim());
					}
				}
					this.load = true;

				this.isMore = Array.isArray(res.data) && res.data.length >= this.PageSize;
			},

			// 点击赠送微信好友（唤起弹窗）0:赠送微信好友 1:赠送客户
			changeNember(item,index) {
				this.selectedStyle = item;
				this.stock = item.StockNum;
				this.showIndex = index
				this.$refs.giveGift.open()
			},
			
			// 库存不足
			showTips() {
				uni.showToast({
					title: '库存不足',
					icon: 'error',
					duration: 1500
				});
			},

			// 关闭赠送微信好友弹窗
			closePopup() {
				this.$refs.giveGift.close();
				setTimeout(() => {
					this.countQty = 1
					// this.numberQty = 1
				}, 1000);
			},

			// 操作赠送数量
			countDecrease() {
				if (this.countQty > 1) {
					this.countQty--;
				}
			},
			countIncrease(stock) {
				if (this.countQty < stock) {
					this.countQty++;
				}
			},
			handleQuantityChange(event) {
				this.countQty = Math.max(1, Math.min(event.target.value, this.stock));
			},
			
			// 赠送微信好友(弹窗内)
			async giveWXfriends(selectedStyle) {
				if (!this.giverName) {
					uni.showToast({
						title: '请填写完整的发件信息',
						icon: 'none',
						duration: 2000
					});
					return;
				}
							
				let res = await this.$api.post('/SendGift/Add', {
					ProductID: selectedStyle.ProductID,
					ProductStyle: selectedStyle.ProductStyle,
					Qty: this.countQty,
					title: this.giverTitle,
					SenderName: this.giverName,
					SenderMobile: this.giverMobile,
					IsSingleSend:3
				});
				
				if (res.code === 0) {
					this.onlyKey = res.data
				}
			},
		
			// 赠送我的客户
			async sendMyCustom(item) {
				// // 先调用生成key的接口
				// await this.giveWXfriends(item)
				this.$store.commit("setSendProduct", item);
				
				uni.navigateTo({
					url: '/pages/custom/selectCustom'
				});
			},
		},

		// 发送到微信
		async onShareAppMessage(res) {
			await this.giveWXfriends(this.selectedStyle);
			let pid = uni.getStorageSync('user').UserID;
			let shareTitle = `${this.giverName}向你赠送了${this.selectedStyle.ProductName}，请尽快领取`;
			let sharePath = `pages/shop/selectAddress?ABC=${this.onlyKey}&pid=${pid}`;
			let imageUrl = this.selectedStyle.img;
			
			this.$refs.giveGift.close()
			this.getList()
			return {
				title: shareTitle,
				path: sharePath,
				imageUrl: imageUrl
			}
		},
		
		onReachBottom() {
			if (this.isMore) {
				this.PageIndex++;
				this.getList();
			}
		},
	};
</script>

<style lang="scss">
	button::after{ border: none; }
	page {
		// height: 100%;
		background: #f6f6f6;
	}

	.gift {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;

		.item {
			// margin: 30rpx 0;

			.single {
				width: 700rpx;
				// height: 252rpx;
				padding: 0 20rpx;
				margin-bottom: 20rpx;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;

				.border {
					display: flex;
					align-items: center;
					// border-bottom: 1rpx solid #E4E4E4;
					padding: 20rpx 0;

					.single_img {
						width: 204rpx;
						height: 204rpx;
						margin-right: 10rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.single_right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						flex: 1;
						margin-left: 10rpx;
						/* margin: 0 5rpx 0 10rpx; */
						height: 200rpx;

						.single_title {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
						}

						.single_tabs {
							display: flex;
							margin: 10rpx 0 10rpx -5rpx;

							.single_tab {
								width: 104rpx;
								height: 36rpx;
								border-radius: 8rpx;
								border: 1rpx solid #F91C1C;
								font-size: 20rpx;
								color: #F91C1C;
								margin: 0 5rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.single_spec {
							font-size: 28rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin: 5rpx 0 20rpx 0;

							.single_style {
								color: #999999;
							}

							// .single_stock {
							// 	color: #999999;
							// }
						}

						.single_bottom {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.single_price {
								font-size: 36rpx;
								color: #F91C1C;
								font-weight: bold;
								display: flex;
								align-items: baseline;
								
								.dollor {
									font-size: 28rpx;
									color: #F91C1C;
								}
							}

							.single_stock {
								color: #999999;
								font-size: 24rpx;
								display: flex;
								// justify-content: space-between;
								// align-items: center;

								.restock {
									margin-left: 10rpx;
									color: #5d8bf8;
								}
							}

							.single_btn {
								font-size: 28rpx;
								color: #FFFFFF;
								width: 132rpx;
								height: 56rpx;
								background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
								border-radius: 28rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
					}
				}

				.border:last-child {
					border-bottom: none;
				}

				.present {
					display: flex;
					font-size: 28rpx;
					color: #999999;
					margin-bottom: 20rpx;
					align-items: center;
					justify-content: space-between;
					
					text {
						color: #999999;
					}

					.present_weixin {
						width: 234rpx;
						height: 72rpx;
						border-radius: 36rpx;
						// border: 2rpx solid #FF450B;
						// color: #5d8bf8;
						border: none;
						color: #FDFDFD;
						background: #FF8E0D;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.present_custom {
						font-weight: bold;
						color: #FFFFFF;
						background: linear-gradient(98deg, #FF6B0B 0%, #FF420A 100%);
					}
					
					.present1_weixin {
						width: 234rpx;
						height: 72rpx;
						border-radius: 36rpx;
						border: 2rpx solid #EBEBEB;
						color: #999999;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					
					.present1_custom {
						background: #EBEBEB;
						color: #999999;
					}
				}
			}
		}



		.gifts {
			width: 100%;
			height: 832rpx;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			background-color: #fff;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			padding: 40rpx;

			.gifts_preview {
				display: flex;
				justify-content: space-between;

				.gifts_img {
					width: 176rpx;
					height: 176rpx;
					overflow: hidden;
					border-radius: 5rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.gifts_right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;
					margin-left: 25rpx;

					.gifts_head {
						display: flex;
						justify-content: space-between;
						line-height: 40rpx;


						.gifts_name {
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							width: 85%;
						}

						.gifts_close {
							width: 40rpx;
							height: 40rpx;
							background: #EEEEEE;
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.gifts_spec {
						font-size: 24rpx;
						color: #999999;
						line-height: 50rpx;
					}

					.gifts_info {
						display: flex;
						justify-content: space-between;
						align-items: baseline;

						.gifts_price {
							font-size: 42rpx;
							color: #F91C1C;
							font-weight: bold;
							display: flex;
							align-items: baseline;
							
							.dollor {
								font-size: 30rpx;
								color: #F91C1C;
							}
						}

						.gifts_stock {
							font-size: 24rpx;
							color: #666666;
							margin-right: 5rpx;
						}
					}
				}
			}

			.gifts_choice {
				margin: 30rpx 0;
				
				.gifts_tips {
					font-size: 28rpx;
					color: #666666;
					margin-top: 20rpx;
				}

				.gifts_count {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 40rpx 0;

					.gifts_title {
						font-size: 28rpx;
						color: #0D0D0D;
						font-weight: bold;
					}

					.gifts_number {
						display: flex;
						justify-content: center;
						align-items: center;
						// width: 120rpx;
						height: 40rpx;

						.gifts_compute {
							width: 32rpx;
							height: 32rpx;
							margin: 0px 5rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						input {
							width: 80rpx;
							background: #F2F2F2;
							border-radius: 8rpx;
							text-align: center;
							line-height: 40rpx;
							font-size: 24rpx;
							color: #0D0D0D;
						}
					}

					.senderName {
						font-size: 28rpx;
						color: #000;
						text-align: right;
						margin-right: 10rpx;
						.input-placeholder{
							font-size: 28rpx;
						}
					}

				}

			}


			.gifts_btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				bottom: 50rpx;
				left: 0;
				width: 100%;
				padding: 0rpx 40rpx;

				.toWXfriends {
					width: 670rpx;
					height: 88rpx;
					background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
					border-radius: 44rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.gifts_btn {
					width: 328rpx;
					height: 88rpx;
					border-radius: 44rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.addressGive {
					background: linear-gradient(98deg, #F6982D 0%, #F7992E 100%);
				}

				.forwardGive {
					background: linear-gradient(98deg, #F87825 0%, #FB5220 100%);
				}
			}
		}
	}

	.orderNow {
		width: 208rpx;
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
		border: 2rpx solid #5d8bf8;
		font-size: 28rpx;
		color: #5d8bf8;
	}
</style>